import React, {Component} from 'react';
import UserHead from '../common/UserHead';
import './News.less'
import Footer from '../common/Footer';
import { Typography, Avatar ,Icon } from 'antd';
import ReactMarkdown from 'react-markdown';

const { Title, Paragraph, Text } = Typography;

class News extends Component {
    constructor(props) {
        super(props);

    }


    componentDidMount() {
        //路由跳转时，滑动到顶部
        window.scrollTo(0, 0)
    }



    render() {
        return (
            <div style={{height:'1024px'}}>
                <div className="news-header">
                    <UserHead/>
                </div>
                <div className="news-content">
                    <div className="news-info">
                        <Typography style={{marginLeft:'3%',marginTop:'5%'}}>
                            <Title>标题</Title>
                            <div style={{height:'80px'}}>
                                <div className='news-info-avatar'>
                                    <Avatar size={58} icon="user" />
                                </div>
                                <div className='news-info-detail'>
                                    <span>作者名&nbsp;&nbsp;&nbsp;&nbsp;<Icon type="heart" /></span>
                                    <p style={{marginTop:'7%'}}>发布日期&nbsp;&nbsp;&nbsp;&nbsp;字数&nbsp;&nbsp;&nbsp;&nbsp;阅读量</p>
                                </div>
                            </div>
                            <div>
                                <Paragraph >
                                    <ReactMarkdown source= ' 文章内容 `markdown`' />
                                </Paragraph>
                            </div>
                        </Typography>
                    </div>
                    <div className="author-info">
                        <div style={{height:'80px',width:'100%',margin:"10% 0 0 3%"}}>
                            <div className='author-info-avatar'>
                                <Avatar size={58} icon="user" />
                            </div>
                            <div className='author-info-detail'>
                                <span>作者名&nbsp;&nbsp;&nbsp;&nbsp;<Icon type="heart" /></span>
                                <p style={{marginTop:'7%'}}>作者简介</p>
                            </div>
                        </div>
                        <div className="author-info-article">
                            <p>文章一</p>
                            <p>文章二</p>
                            <p>文章三</p>
                        </div>
                        <div className="author-info-articles">
                            <h3>推荐阅读</h3>
                            <p>文章一</p>
                            <p>文章二</p>
                            <p>文章三</p>
                        </div>
                    </div>
                </div>
                <div className="news-footer">
                    <Footer />
                </div>
            </div>
        );
    }
}



export default News;